<template>
  <div>
    <!-- 入院详情 -->

    <el-card class="card">
      <!-- 申请信息 -->
      <div class="header">
        <div class="header_left">
          <span class="line" />
          <span>申请信息</span>
        </div>
      </div>
      <div class="applyContent">
        <div class="txt">申请人：&nbsp;&nbsp;{{ ruleForm.addAccountName }}</div>
        <div class="txt">申请时间：&nbsp;&nbsp;{{ ruleForm.addTime }}</div>
        <div class="txt">
          申请状态：&nbsp;&nbsp;{{ ruleForm.state == 0 ? "待提交入院" : "已提交入院" }}
        </div>
      </div>
      <!-- 老人信息 -->
      <div class="header">
        <div class="header_left">
          <span class="line" />
          <span>老人信息</span>
        </div>
      </div>
      <div class="applyContent">
        <div class="txt">老人姓名：&nbsp;&nbsp;{{ ruleForm.elderlyName }}</div>
        <div class="txt">身份证号：&nbsp;&nbsp;{{ ruleForm.elderlyIdCard }}</div>
        <div class="txt">护理等级：&nbsp;&nbsp;</div>
        <div class="txt familyTable">
          家属信息：
          <el-table :data="tableData" style="width: 450px">
            <el-table-column prop="name" label="家属姓名" width="180" />
            <el-table-column prop="relation" label="与老人关系" width="180" />
            <el-table-column prop="mobile" label="联系方式" />
          </el-table>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="header">
        <div class="header_left">
          <span class="line" />
          <span>订单信息</span>
        </div>
      </div>
      <div class="applyContent">
        <div class="txt">下单人：&nbsp;&nbsp;{{ ruleForm.addAccountName }}</div>
        <div class="txt">入住床位：&nbsp;&nbsp;{{ ruleForm.begName }}</div>
        <div class="txt">下单时间：&nbsp;&nbsp;{{ ruleForm.addTime }}</div>
        <div class="txt">
          入住时段：&nbsp;&nbsp;{{ ruleForm.addTime }} 至 {{ ruleForm.startDate }}
        </div>
        <div class="txt familyTable">
          护理服务：
          <el-table :data="ruleForm.services" style="width: 450px">
            <el-table-column prop="serviceName" label="服务项目" width="180" />
            <el-table-column prop="serviceContent" label="服务内容" width="180" />
            <el-table-column prop="mobile" label="合计" />
          </el-table>
        </div>
        <div class="txt familyTable">
          订单合同：
          <img
            v-for="item in ruleForm.files"
            v-if="ruleForm.files"
            :src="imgUrl + item.file"
            style="width: 120px; height: 170px; object-fit: cover"
            alt=""
          />
        </div>
      </div>
      <!-- 财务信息 -->
      <div class="header">
        <div class="header_left">
          <span class="line" />
          <span>财务信息</span>
        </div>
      </div>
      <div class="applyContent">
        <div class="txt">床位费：&nbsp;&nbsp;{{ ruleForm.begPrice }}</div>
        <div class="txt">护理费：&nbsp;&nbsp;{{ ruleForm.servicePrice }}</div>
        <div class="txt">膳食费：&nbsp;&nbsp;{{ ruleForm.foodPrice }}</div>
        <div class="txt">押金：&nbsp;&nbsp;{{ ruleForm.cashPledge }}</div>
        <div class="txt">一次性生活费：&nbsp;&nbsp;{{ ruleForm.livingPrice }}</div>
        <div class="txt">合计：&nbsp;&nbsp;{{ allPrice }}</div>
      </div>
      <!-- 返回 -->
      <div style="text-align: center">
        <el-button @click="back">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getModel } from "@/api/market/hospitalized/hospitalized";
import { AddResult } from "@/api/market/hospitalized/type";
import { reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getElderlyModel } from "../../api/market/elderly/elderly";

const route = useRoute();
const router = useRouter();

const ruleForm = reactive<AddResult>({});

//家属信息表格数据
const tableData = reactive([]);
// 图片根路径
const imgUrl = ref(import.meta.env.VITE_IMG_URL);

//详情
const getDetail = async (id: number) => {
  let res = await getModel(id);

  Object.assign(ruleForm, res);
};

//总价
const allPrice = computed(() => {
  return (
    ruleForm.begPrice! +
    ruleForm.servicePrice! +
    ruleForm.foodPrice! +
    ruleForm.cashPledge! +
    ruleForm.livingPrice!
  );
});

//获取老人详情
const getElderlyDetail = async (id: number) => {
  let res = await getElderlyModel(id);
  Object.assign(tableData, res.family);
};

//返回
const back = () => {
  router.push("/market/hospitalized");
};

onMounted(() => {
  if (route.params.id) {
    getDetail(Number(route.params.id));
  }

  if (route.query.elderlyId) {
    getElderlyDetail(Number(route.query.elderlyId));
  }
});
</script>

<style scoped lang="less">
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;

  .header {
    display: flex;
    align-items: center;
    height: 50px;

    .header_left {
      display: flex;
      align-items: center;
      margin-right: 30px;
      font-weight: bold;

      .line {
        display: block;
        width: 6px;
        height: 20px;
        margin-right: 8px;
        background-color: #529bfd;
      }
    }
  }

  .applyContent {
    margin-bottom: 30px;

    .txt {
      margin-top: 30px;

      /deep/.cell {
        color: #000;
      }
    }

    .familyTable {
      display: flex;
    }
  }
}
</style>
